<!DOCTYPE html>
<html lang="zh-Hans">

<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="Note">
    

    <!--Author-->
    
        <meta name="author" content="兰陵忧患生">
    

    <!-- Title -->
    
    <title>HTML5 秘籍 | Lan</title>

    <!-- Bootstrap Core CSS -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css">
    <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <!-- Content -->
    <section class="article-container">
<!-- Back Home -->
<a class="nav-back" href="/">
    <i class="fa fa-puzzle-piece"></i>
</a>

<!-- Page Header -->
<header class="intro-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>HTML5 秘籍</h1>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">
            <!-- TOC -->
            <div class="toc-article col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#HTML5-秘籍"><span class="toc-text">HTML5 秘籍</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#2-构建网页新方式"><span class="toc-text">2 构建网页新方式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-3-语义元素"><span class="toc-text">2.3 语义元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-4-使用语义元素"><span class="toc-text">2.4 使用语义元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-5-HTML5-纲要"><span class="toc-text">2.5 HTML5 纲要</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#有意义的标记"><span class="toc-text">有意义的标记</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#其他语义标准"><span class="toc-text">其他语义标准</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#ARIA-无障碍富因特网应用"><span class="toc-text">ARIA 无障碍富因特网应用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#RDFa-资源描述框架"><span class="toc-text">RDFa 资源描述框架</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Microformats-微格式"><span class="toc-text">Microformats 微格式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Microdata-微数据"><span class="toc-text">Microdata 微数据</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Google-Rich-Snippets"><span class="toc-text">Google Rich Snippets</span></a></li></ol></li></ol></li></ol>
</div>

            <!-- Post Main Content -->
            <div class="post-content col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <h1 id="HTML5-秘籍"><a href="#HTML5-秘籍" class="headerlink" title="HTML5 秘籍"></a>HTML5 秘籍</h1><h2 id="2-构建网页新方式"><a href="#2-构建网页新方式" class="headerlink" title="2 构建网页新方式"></a>2 构建网页新方式</h2><h3 id="2-3-语义元素"><a href="#2-3-语义元素" class="headerlink" title="2.3 语义元素"></a>2.3 语义元素</h3><ul>
<li><code>&lt;header&gt;</code> 页眉, <code>&lt;footer&gt;</code> 页脚, <code>&lt;article&gt;</code> 文章</li>
<li><code>&lt;hgroup&gt;</code> 副标题</li>
<li><p><code>&lt;figure&gt;</code> 插图, <code>&lt;figcaption&gt;</code> 图题</p>
<ul>
<li><code>&lt;img&gt;</code> 中的元素 alt 不能设置为空字符串。这意味者你的图片纯粹是装饰用的，屏幕阅读器会忽略不读。</li>
</ul>
</li>
<li><code>&lt;aside&gt;</code> 与周围文本没有密切相关的内容。页面中一个完全独立的区块，作为页面主要内容的陪衬。如：附注</li>
</ul>
<h3 id="2-4-使用语义元素"><a href="#2-4-使用语义元素" class="headerlink" title="2.4 使用语义元素"></a>2.4 使用语义元素</h3><ul>
<li>网页中可以包含多个 <header> 元素（通常应该如此），即使相应的区块在页面中角色不一样。</header></li>
<li>独立区块完全可以重新建立标题级别。（多个 <code>&lt;h1&gt;</code> ）</li>
<li><code>&lt;nav&gt;</code> 包装一组链接，通常只用于页面中最大主要的导航区</li>
<li><p><code>&lt;section&gt;</code> 适合任何以标题开头的内容区块</p>
<ul>
<li>与页面主体内容并列显示的小内容块</li>
<li>独立性内容</li>
<li>分组内容</li>
<li>比较长的文档中的一部分</li>
</ul>
</li>
<li><code>&lt;details&gt;</code>, <code>&lt;summary&gt;</code> 折叠框</li>
</ul>
<h3 id="2-5-HTML5-纲要"><a href="#2-5-HTML5-纲要" class="headerlink" title="2.5 HTML5 纲要"></a>2.5 HTML5 纲要</h3><h2 id="有意义的标记"><a href="#有意义的标记" class="headerlink" title="有意义的标记"></a>有意义的标记</h2><ul>
<li><p>使用  <code>&lt;time&gt;</code> 标注日期和时间</p>
<pre><code class="Java">  The party starts &lt;time datetime=&quot;2012-03-21T16:30+8:00&quot;&gt;March 21&lt;sup&gt;st&lt;/sup&gt;at 4:30 p.m.&lt;/time&gt;
  // +8:00 代表时区

  Published on &lt;time datetime=&quot;2011-03-21&quot; pubdate&gt;March 31, 2011&lt;/time&gt;
  // pubdate 当前内容对应一个发表日期
</code></pre>
</li>
<li><p><code>&lt;output&gt;</code> 标注 JavaScript 返回值</p>
</li>
<li><code>&lt;mark&gt;</code> 标注突显文本（添加黄色背景），标注重要的内容或关键字</li>
</ul>
<h3 id="其他语义标准"><a href="#其他语义标准" class="headerlink" title="其他语义标准"></a>其他语义标准</h3><h4 id="ARIA-无障碍富因特网应用"><a href="#ARIA-无障碍富因特网应用" class="headerlink" title="ARIA 无障碍富因特网应用"></a>ARIA 无障碍富因特网应用</h4><h4 id="RDFa-资源描述框架"><a href="#RDFa-资源描述框架" class="headerlink" title="RDFa 资源描述框架"></a>RDFa 资源描述框架</h4><h4 id="Microformats-微格式"><a href="#Microformats-微格式" class="headerlink" title="Microformats 微格式"></a>Microformats 微格式</h4><h4 id="Microdata-微数据"><a href="#Microdata-微数据" class="headerlink" title="Microdata 微数据"></a>Microdata 微数据</h4><h3 id="Google-Rich-Snippets"><a href="#Google-Rich-Snippets" class="headerlink" title="Google Rich Snippets"></a>Google Rich Snippets</h3><ul>
<li>SEO（Search Engine Optimization，搜索引擎优化）</li>
<li><a href="https://search.google.com/structured-data/testing-tool" target="_blank" rel="external">结构化数据测试工具</a></li>
</ul>

 
                <!-- Meta -->
                <div class="post-meta">
                    <hr>
                    <br>
                    <div class="post-tags">
                        
                            

<a href="/tags/HTML5/">#HTML5</a>


                        
                    </div>
                    <div class="post-date">
                        2017 年 05 月 10 日
                    </div>
                </div>
            </div>

            <!-- Comments -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <!-- Disqus Comments -->


            </div>
        </div>
    </div>
</article>
</section>

    <!-- Scripts -->
    <!-- jQuery -->
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript">
	hljs.initHighlightingOnLoad();
	console.log('Hexo-theme-hollow designed by zchen9 http://www.chen9.info © 2015-' + (new Date()).getFullYear());
</script>

    <!-- Google Analytics -->
    

</body>

</html>